<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import leftbar from '@/components/leftbar.vue'
import navbar from '@/components/navbar.vue'
import { showSuccessToast } from 'vant';

// defineProps<{ msg: string }>()

// ruoter
const router = useRouter()
const isAll = ref(false)

const checked = ref([])

const hbList = ref([
  { name: '货币1', des: '描述1' },
  { name: '货币2', des: '描述2' },
  { name: '货币23', des: '描述3' }
])

const checkboxGroup = ref(null)
const checkAll = () => {
  checkboxGroup.value.toggleAll(true)
  isAll.value = false
  console.log(checked)
}
const toggleAll = () => {
  checkboxGroup.value.toggleAll()
  isAll.value = true
  console.log(checked)
}

// 完成
const submit = () => {
  showSuccessToast('选中成功');
}


onMounted(() => {
  // showDialog({
  //   message: '你当前不具备支付督察信息员资格！\n请进行资格申请',
  //   theme: 'round-button',
  //   confirmButtonText: '申请资格'
  // }).then(() => {
  //   // on close
  //   router.push({ path: 'application' })
  // })
})
</script>

<template>
  <navbar title="选定交易品种" left="true">
    <template #right>
      <van-icon name="plus" style="color: #fff; font-size: 22px" />
      <van-icon name="list-switching" style="color: #fff; font-size: 22px; margin-left: 10px" @click="checkAll" v-if="isAll" />
      <van-icon name="apps-o" style="color: #fff; font-size: 22px; margin-left: 10px" @click="toggleAll" v-else />
      <van-icon name="passed" style="color: #fff; font-size: 22px; margin-left: 10px"  @click="submit"/>

    </template>
  </navbar>
  <van-notice-bar color="#1989fa" background="#ecf9ff">
    <span class="iconfont icon-xiangao1" style="color: #1989fa; font-size: 16px"></span>
    已选择： {{ checked.length }}
  </van-notice-bar>
  <div class="page">
    <van-checkbox-group v-model="checked" ref="checkboxGroup">
      <div class="box-item" v-for="(item, index) in hbList" :key="index">
        <div class="box-icon"><span class="iconfont icon-xiangao1" style="color: #333; font-size: 22px"></span></div>
        <div class="box-info">
          <div class="title">货币1</div>
          <p>描述1</p>
        </div>
        <div class="box-btn">
          <van-checkbox :name="item.name"></van-checkbox>
        </div>
      </div>
    </van-checkbox-group>
  </div>
  <tabbar />
</template>

<style scoped lang="scss">
.read-the-docs {
  width: 300px;
  text-align: center;
}
.page {
  padding: 10px;
}
.box-item {
  display: flex;
  // justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
  border-bottom: 1px solid rgb(236, 236, 236);
  .box-info{
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  .title {
    font-size: 15px;
  }
  p {
    color: #999;
    font-size: 14px;
  }
  .box-icon {
    margin-right: 10px;
  }
}
</style>
